웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.
# SCSS의 스타일 확장 알아보기, @extend
전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.
@extend <가져올 스타일>
문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.
이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼리 적용하여 사용할 수 있게죠.
그럼 아래는 @extend를 사용한 예제와 방법입니다.
특히 버튼을 생각하면 동일한 스타일이 많이 사용되므로 @extend를 적용하기 아주 좋은 예 중 하나입니다. 버튼의 스타일을 적용하고 각각 스타일을 적용하는 예제를 만들어볼까 합니다.
일단 기본적인 버튼의 스타일을 적용했습니다. 이제 모든 버튼을 위의 스타일을 가지되 여러가지 색을 가지도록 정의해보겠습니다.
간단하게 흰색과 빨간색 버튼을 만들어 보았습니다. 매우 간단합니다. 이번에는 비활성화 버튼을 만들어볼까요?
이번에도 역시 동일하게 @extend를 사용하여 클릭이 안되고 약간의 투명도를 주어 비활성화 버튼을 구현하였습니다.
아래처럼 전처리기를 활용해 사용할 수도 있겠죠.
여기까지 scss의 @extend를 사용한 스타일 확장 방법에 대하여 알아보았습니다.
참고로 비슷한 방법으로 @include, @mixin을 사용할 수 있습니다. 스타일을 미리 정의하고 필요할 때 가져올 것인지... 아니면 미리 적용한 스타일을 확장해 사용할 것인지의 차이점이 있겠죠.
scss @include, @mixin 더 알아보기 >
https://webisfree.com/2019-10-08/[scss]-mixin-include-사용방법-및-예제보기
# SCSS의 스타일 확장 알아보기, @extend
전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.
@extend <가져올 스타일>
문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.
이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼리 적용하여 사용할 수 있게죠.
그럼 아래는 @extend를 사용한 예제와 방법입니다.
! scss @extend 사용하는 방법 및 예제보기
특히 버튼을 생각하면 동일한 스타일이 많이 사용되므로 @extend를 적용하기 아주 좋은 예 중 하나입니다. 버튼의 스타일을 적용하고 각각 스타일을 적용하는 예제를 만들어볼까 합니다.
.btn {
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
}
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
}
일단 기본적인 버튼의 스타일을 적용했습니다. 이제 모든 버튼을 위의 스타일을 가지되 여러가지 색을 가지도록 정의해보겠습니다.
// 흰색 버튼
.btn-white {
@extend .btn;
backgroud-color: white;
}
// 빨간 버튼
.btn-red {
@extend .btn;
backgroud-color: red;
}
.btn-white {
@extend .btn;
backgroud-color: white;
}
// 빨간 버튼
.btn-red {
@extend .btn;
backgroud-color: red;
}
간단하게 흰색과 빨간색 버튼을 만들어 보았습니다. 매우 간단합니다. 이번에는 비활성화 버튼을 만들어볼까요?
// 비활성화 버튼
.btn-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
.btn-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
이번에도 역시 동일하게 @extend를 사용하여 클릭이 안되고 약간의 투명도를 주어 비활성화 버튼을 구현하였습니다.
아래처럼 전처리기를 활용해 사용할 수도 있겠죠.
.btn {
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
&-white {
@extend .btn;
backgroud-color: white;
}
&-red {
@extend .btn;
backgroud-color: red;
}
&-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
}
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
&-white {
@extend .btn;
backgroud-color: white;
}
&-red {
@extend .btn;
backgroud-color: red;
}
&-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
}
여기까지 scss의 @extend를 사용한 스타일 확장 방법에 대하여 알아보았습니다.
참고로 비슷한 방법으로 @include, @mixin을 사용할 수 있습니다. 스타일을 미리 정의하고 필요할 때 가져올 것인지... 아니면 미리 적용한 스타일을 확장해 사용할 것인지의 차이점이 있겠죠.
scss @include, @mixin 더 알아보기 >
https://webisfree.com/2019-10-08/[scss]-mixin-include-사용방법-및-예제보기
아래의 글도 찾고 계시지 않나요?
